<!--运费计算-->
<template>
  <div class="container shipcalcu">
    <div class="page-title">
      <p class="title">Shipping cost calculator</p>
    </div>
    <div class="shipcalcu-frame">
      <div class="panel">
        We have a variety of logistics channels for you to choose. The price and
        service of each channel are different.
      </div>
      <div class="panel calu-frame">
        <div class="calu-panel col-sm-12 col-md-12 col-lg-6">
          <p>
            In order to get as accurate data as possible, please input the
            estimated weight and size of your package. In part, the freight is
            calculated according to the larger value of the actual weight and
            volume weight. The calculation method of volume weight: length ×
            width × height ÷ 5000.
          </p>
        </div>
        <div class="calu-panel col-sm-12 col-md-12 col-lg-6">
          <div class="calu-fast">
            <div class="ul-frame">
              <span>PURPOSE OF THE NATIONAL</span>
              <div class="ul-panel" @click="countryShow = true">
                <p class="ul-fast">选择国家</p>
                <van-icon name="arrow-down" />
              </div>
            </div>
            <div class="ul-frame">
              <span>THE ACTUAL WEIGHT /kg</span>
              <div class="ul-panel">
                <input
                  placeholder="请输入重量/kg"
                  class="input-frame"
                  style="width: 70%"
                />
              </div>
            </div>
            <div class="ul-frame">
              <span>VOLUME /cm</span>
              <div class="ul-panel">
                <input placeholder="length/cm" class="input-frame" />
              </div>
              <div class="ul-panel">
                <input placeholder="width/cm" class="input-frame" />
              </div>
              <div class="ul-panel">
                <input placeholder="height/cm" class="input-frame" />
              </div>
            </div>
            <div class="ul-frame">
              <div
                class="ul-panel"
                style="justify-content: flex-start; padding-left: 0"
              >
                <div class="icon-panel bg ac-bg">计算</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel caluList-frame">
        <div
          class="caluList-panel col-sm-12 col-md-12 col-lg-6"
          v-for="item in 10"
        >
          <div class="caluList-fast">
            <p class="name">ems特快专递</p>
            <p>
              <span class="price">$250</span>
              <span class="time">22-30 working days</span>
            </p>
          </div>
        </div>
      </div>
      <div class="panel">
        <span style="font-size: 0.8rem"
          >The freight details are as follows:</span
        >
        The volume calculation method is: length × width × height / 5000; the
        service weight segment is subject to the price list; the billable weight
        of each cargo is the greater of the real weight and volume weight. The
        total billable weight of multiple goods for one ticket is calculated
        according to the larger of the actual weight or volume weight of each
        cargo, and the billable weight of each cargo is the sum of the billed
        weight of each cargo (single ticket billing) If the weight is less than
        20.5KG (including 20.5KG) and less than 0.5KG, it will be charged at
        0.5KG. If the single ticket is over 21KG (including 21KG) and less than
        1KG, it will be charged at 1KG).
        <span style="font-size: 0.8rem; margin-top: 0.5rem"
          >The case is as follows:</span
        >
        Actual weight, volume weight, billing weight First shipment 5.3KG 3.0KG
        5.3KG First shipment 10.8KG 7.2KG 10.8KG Second shipment 2.8KG 3.2KG
        3.2KG Second shipment 12.8KG 18.1KG 18.1KG Third shipment 5.1KG 6.6KG
        6.6KG Third shipment 15.2KG 30.2KG 30.2KG The total billable weight of
        the real weight is: 5.3 + 3.2 + 6.6 = 15.1KG, and the billable weight
        receivable is 15.5KG.The total billable weight of volumetric weight is:
        10.8 + 18.1 + 30.2 = 59.1KG, and the billable weight receivable is
        60KG.,
      </div>
    </div>
    <van-popup
      v-model="countryShow"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-picker
        show-toolbar
        title="Choose a country"
        :columns="countryList"
        @confirm="countryConfirm"
        @cancel="countryCancel"
        value-key="name"
        confirm-button-text="Sure"
        cancel-button-text="Cancel"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      countryShow: false,
      countryList: [],
    };
  },
  methods: {
    countryConfirm() {},
    countryCancel() {
      this.countryShow = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import "fqa.less";
</style>